<!DOCTYPE html>
<html lang="en">
<head>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        #fault_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
        }
        #admin_table_wrapper {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:calc(100% - 16px);
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:13px;
            color:#333;
        }
        #admin_update_submit {
            display:block;
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            font-size:15px;
            border-radius:5px;
            margin-top:10px;
            cursor:pointer;
        }
        #role_update_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        #admin_update_submit:hover {
            filter:brightness(110%);
        }
        #admin_table_list {
            width:100%;
            table-layout:fixed
        }
        #admin_table_list td {
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding:10px 0;
            background-color:#ccc;
            font-size:12px;
        }
        .admin_state_radio > span {
            font-size:13px;
            float:right;
            margin:0 15px 0 5px;
        }
        .admin_state_radio > input {
            width:15px;
            height:15px;
            margin:0;
        }
        .fault_selector {
            width:100%;
            height:30px;
            margin-top:30px;
            outline:none;
        }
        #fault_update_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #fault_update_submit:hover {
            filter: brightness(110%);
        }
        .fault_state {
            float:left;
            height:15px;
            line-height:15px;
            font-size:12px;
            margin-top: 30px;
        }
        .fault_state > input[type=radio] {
            float:left;
            width:15px;
            height:15px;
        }
        .fault_state > p {
            float:left;
            margin: 0 15px 0 5px;
        }
        .first_menu {
            width:calc(100% - 15px);
            padding:5px 0 5px 15px;
            font-size:15px;
            color:#333;
            border-bottom:1px #ccc dashed;
        }
        .second_menu {
            width:calc(100% - 30px);
            padding:5px 0 5px 30px;
            height:15px;
            font-size:12px;
            color:#333;
            line-height:15px;
        }
        .second_menu > input[type=checkbox] {
            float:left;
            width:15px;
            height:15px;
            margin-right:15px;
        }
        #menu_list {
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class="loading">
    </div>
    <div id="fault_wrapper">
        <div class="wrapper_head">
            <h2>角色管理</h2>
        </div>
        <form id="role_update_form" method="post" target="rfFrame">
            <input type="hidden" id="roleId" name="roleId" value="-1" />
            <h3>角色修改: </h3>
                <select id="role_select" class="fault_selector">
                    <option>请选择角色...</option>
                </select>
                <input type="text" name="role_name" id="role_name_input" class="form_input_text" maxlength="20" placeholder="请输入角色名..." autocomplete="off" />
                <input type="text" name="role_remark" id="role_remark_input" class="form_input_text" maxlength="50" placeholder="请输入角色备注..." autocomplete="off" />
                <div id="menu_list">

                </div>
                <input type="submit" id="fault_update_submit" name="submit" value="修改" />
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            <div style="clear:both"></div>
            </form>
        <div style="clear:both"></div>
    </div>
</body>
<script>
    getAllFirstMenu();
    function getAllFirstMenu() {
        $(".loading").css("display", "block");
        $.ajax({
            url: "${request.contextPath}/getAllFirstMenu",
            type: "post",
            async: false,
            dataType: "text",
            success: function (data) {
                if(data != "") {
                    var json = JSON.parse(data);
                    for(var j in json) {
                        $("#menu_list").append("<div class='first_menu' value='"+json[j].id+"'>"+json[j].name+"</div>");
                        var secondJson = getSecondMenu(json[j].id);
                        if(secondJson != "" || secondJson != "error") {
                            for(var sj in secondJson) {
                                $("#menu_list").append("<div class='second_menu'><input type='checkbox' name='menu_permission' value='"+secondJson[sj].menuPermission+"'/>"+secondJson[sj].name+"</div>");
                            }
                        }
                    }
                }
            }
        })
        $(".loading").css("display", "none");
    }

    function getSecondMenu(id) {
        var json;
        $.ajax({
            url: "${request.contextPath}/getSecondMenuById",
            type: "post",
            data: {id:id},
            async: false,
            dataType: "text",
            success: function (data) {
                if(data != "") {
                    json = JSON.parse(data);
                }
                return "error";
            },
            error: function(data) {
                return "error";
            }
        })
        return json;
    }
    getRoleList();
    function getRoleList() {
        $.ajax({
            url: "${request.contextPath}/getRoleList",
            type: "get",
            async: false,
            dataType: "text",
            success: function(data) {
                if(data != "") {
                    var json = JSON.parse(data);
                    for(var j in json) {
                        $("<option value='"+json[j].id+"---"+json[j].remark+"'>"+json[j].name+"</option>").appendTo($("#role_select"));
                    }
                }
            },
            error: function() {

            }
        })
    }
    $("#role_select").change(function() {
        if($(this).val() != "请选择角色...") {
            $("#roleId").val(this.options[this.selectedIndex].value.split("---")[0]);
            $("#role_name_input").val(this.options[this.selectedIndex].innerHTML);
            $("#role_remark_input").val(this.options[this.selectedIndex].value.split("---")[1]);
        }else {
            $("#roleId").val(-1);
            $("#role_name_input").val("");
            $("#role_remark_input").val("");
        }
    })

    $("#role_update_form").submit(function() {
        var id = $("#roleId").val();
        var name = $("#role_name_input").val().replace(" ", "");
        var remark = $("#role_remark_input").val();
        if(id == -1) {
            alert("请先选择一个角色!");
            return;
        }
        if(name == "") {
            alert("角色名不能为空!");
            return;
        }
        $.ajax({
            url: "${request.contextPath}/updateRole",
            type: "post",
            async: false,
            data: $(this).serialize(),
            dataType: "text",
            success: function(data) {
                if(data == "success") {
                    alert("修改成功!");
                }else if(data == "idError") {
                    alert("角色ID错误");
                }else if(data == "nameError") {
                    alert("角色名错误!");
                }
            },
            error: function(data) {

            }
        })
    })
</script>
</html>